<template>
    <div class="basic-wrapper">
        <div class="title">
            <span>基本信息</span>
            <el-icon color="#409eff" @click="edit" v-if="detailData"><Edit /></el-icon>
        </div>
        <el-skeleton animated :loading="loading">
            <template #template>
                <el-skeleton-item />
                <el-skeleton-item />
                <el-skeleton-item />
                <el-skeleton-item />
            </template>
            <template #default>
                <el-descriptions v-if="detailData" :column="4" border>
                    <el-descriptions-item :span="3" label="协议名称">
                        {{ detailData?.protocolPublic.protocolName }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="1" label="标识符">
                        {{ detailData?.protocolPublic.protocolNo }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="detailData?.protocolPublic.enableScript ? 1 : 2" label="协议类型">
                        <div class="tag-item-value">
                            <el-tag
                                :type="
                                    detailData?.protocolPublic.protocolType === 'modbus'
                                        ? 'warning'
                                        : detailData?.protocolPublic.protocolType === 'mqtt'
                                          ? 'primary'
                                          : 'success'
                                "
                            >
                                {{ detailData?.protocolPublic.protocolType }}
                            </el-tag>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item :span="detailData?.protocolPublic.enableScript ? 1 : 2" label="是否启用脚本">
                        <el-switch :model-value="detailData?.protocolPublic.enableScript" disabled />
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" label="脚本名称" v-if="detailData?.protocolPublic.enableScript">
                        <el-button link type="primary" @click="onViewScript">
                            {{ detailData?.script.scriptName }}
                        </el-button>
                    </el-descriptions-item>
                    <el-descriptions-item
                        :span="detailData?.protocolPublic.checkType === 'hash' ? 2 : 4"
                        label="校验方式"
                        v-else
                    >
                        {{ CheckType[detailData?.protocolPublic.checkType] }}
                    </el-descriptions-item>
                    <el-descriptions-item
                        :span="2"
                        label="哈希名称"
                        v-if="detailData?.protocolPublic.checkType === 'hash'"
                    >
                        {{ HashType[detailData?.protocolPublic.checkName] }}
                    </el-descriptions-item>
                    <template v-if="detailData?.protocolPublic.checkType === 'crc'">
                        <el-descriptions-item :span="1" label="CRC类型">
                            {{ CrcType[detailData?.crcCheckModel.crcType] }}
                        </el-descriptions-item>
                        <el-descriptions-item :span="1" label="CRC名称">
                            {{ detailData?.protocolPublic.checkName }}
                        </el-descriptions-item>
                        <el-descriptions-item :span="1" label="CRC初始值">
                            {{ detailData?.crcCheckModel.crcInitValue }}
                        </el-descriptions-item>
                        <el-descriptions-item :span="1" label="表达式">
                            {{ detailData?.crcCheckModel.crcMultinomial }}
                        </el-descriptions-item>
                    </template>
                    <el-descriptions-item :span="1" label="创建人">
                        {{ detailData?.protocolPublic.creator }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="1" label="创建时间">
                        {{ detailData?.protocolPublic.createTime }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" label="当前版本">
                        <div class="version-item-value">
                            <div>{{ detailData.version || '--' }}</div>
                            <el-button type="primary" link disabled> 查看历史版本 </el-button>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item :span="4" label="描述">
                        <div class="value">
                            {{ detailData?.protocolPublic.protocolDescription }}
                        </div>
                    </el-descriptions-item>
                </el-descriptions>
            </template>
        </el-skeleton>
    </div>
</template>
<script setup lang="ts">
import { HashType, CrcType, CheckType } from '@/utils/constant';
import CreateEdit from '../../../list/CreateEditModal.vue';
import DialogModal from '@/pages/run/scriptManage/components/DialogModal.vue';
import { showPopupBox } from '@great/utils';
import { Edit } from '@element-plus/icons-vue';
import { runScriptService } from '@great/services';

const props = defineProps<{
    detailData?: Record<string, any>;
}>();
const loading = ref(true);
const initDetail = inject('initDetail');

// 查看脚本
const onViewScript = async () => {
    let row = await runScriptService.getScriptDetail(props.detailData?.script.id);
    showPopupBox(DialogModal, {
        row: row.data,
        readonly: true
    });
};
const edit = () => {
    showPopupBox(CreateEdit, {
        row: props.detailData?.protocolPublic as any,
        callBack: initDetail as () => Promise<void>
    });
};
watch(
    () => props.detailData,
    newValue => {
        if (newValue) loading.value = false;
    },
    { immediate: true }
);
</script>
<style scoped lang="scss">
.basic-wrapper {
    .title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        > span {
            margin-right: 5px;
        }
        .el-icon {
            cursor: pointer;
        }
    }
    .el-descriptions {
        .label {
            display: flex;
            align-items: center;
            > span {
                margin-right: 3px;
            }
        }
        .value {
            height: 64px;
        }
        .version-item-value {
            display: flex;
            justify-content: space-between;
        }
        .tag-item-value {
            display: flex;
            align-items: center;
        }
    }
}
</style>
